<template>
   <!-- v-cloak 在组件元素编译 完成之前  隐藏元素 -->
  <div v-cloak>
    <h1>购物车组件</h1>
    <input type="text">
    <!-- v-pre 原样输出内容 不进行编译 -->
     <h1 v-pre> {{hello}}</h1>

     <!-- v-once  数据初次渲染后  不会在发生变化-->
      <h1 v-once>{{myname}}</h1>
      <button @click="changeName">改变数据</button>

    <h1>组件切换</h1>
    <h1>{{kk}}</h1>
    <!-- v-text 渲染文本 -->
    <h1 v-text="mytext"></h1>
    <!-- v-html渲染  可以编译html内容 输出 -->
     <div id="mybox" v-html="myhtml"></div>
    <!-- 动态组件component  -->
     <!-- is 属性的属性值是 组件名  -->
     <component :is="componentId"></component>

       <button @click="change('cartOne')">第一个</button>
      <button @click="change('cartTwo')">第二个</button>
  </div>
</template>

<script>
import cartOne from './cartOne'
import cartTwo from './cartTwo'
export default {
  name: 'Vue2304BCart',
  components:{
    cartOne,
    cartTwo
  },
  data() {
    return {
        myname:"赵丽颖",
        flag:true,
        mytext:"<p>你好世界</p>",
        myhtml:"<b style='color:red;font-size:20px;'>你好，李焕英</b>",
        kk:"sahfisadhfsahkjlfdhddhdhdhhsfkjsdkfkashdfj",
        componentId:"cartTwo" //组件名
    };
  },

  mounted() {
    
  },

  methods: {
      change(comName){//切换 动态组件component 后面的 属性值
          this.componentId=comName

      },
      changeName(){
        this.myname="冯绍峰"
      }
  },
};
</script>
<style lang="less" scoped>
  [v-cloak]{
    display:none;
  }
</style>